<html>
<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>贷款管理系统</title>
    <link rel="icon" href="${createLinkTo(dir: "images", file: "favicon.ico")}" type="image/x-icon">
    <link rel="shortcut icon" href="${createLinkTo(dir: 'images', file: 'favicon.ico')}" type="image/x-icon"/>
    <asset:stylesheet src="homer/vendor/fontawesome/css/font-awesome.css"/>
    <asset:stylesheet src="homer/vendor/bootstrap/dist/css/bootstrap.css"/>
    <asset:stylesheet src="homer/style.css"/>
    <asset:stylesheet src="homer/vendor/slideUnlock/drag.css"/>
    <asset:javascript src="homer/vendor/jquery/dist/jquery.min.js"/>
    <asset:javascript src="checkpswformat.js"/>
    <style type="text/css">
   <style>
    body {
    font-family: "Microsoft YaHei", "Microsoft Sans Serif", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", sans-serif;
    }
    input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px #fff inset !important; /*当谷歌浏览器输入框 有默认的cookie值的时候，会发现输入框背景颜色为黄色*/
    }
    .form-control, .btn {
    border-radius: 0 !important;
    }
</style>
</head>
<body class="blank">
<!-- Simple splash screen-->
<div class="splash">
    <div class="splash-title">
        <p></p>
        <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </div>
</div>
<div class="color-line"></div>
<g:if test='${flash.message == '请重置密码'}'>
    <div class="wholeBg">
        <div class="login-container">
         <div class="top-background"></div>
            <div class="col-md-12 smallBg">
                <div class="text-center m-b-md">
                    <h3>请重置密码</h3>
                    %{--<span>贷款管理系统</span>--}%
                </div>
                <div class="hpanel rightBox" style="margin-bottom: 0">
                    <div class="panel-body">
                        <div class="helpMsg"></div>
                        <form controller="login" action="updatePassword" method='POST' id="updateForm">
                            <div class="">
                                <label class="control-label" for="username">用户名</label>
                                <input type="text" title="Please enter you username" required="" value="${username}"
                                       name="username"
                                       id="username1" class="form-control" autofocus="autofocus">
                                <span class="help-block small" id="nameHelp">请输入用户名</span>
                            </div>

                            <div class="">
                                <label class="control-label" for="password">原始密码</label>
                                <div class="clearfix"></div>

                                <div class="">
                                    <div style="width:100%;float: left;">
                                        <input type="password" title="Please enter your old password"
                                               placeholder="************"
                                               required="" value="" name="oldPassword" id="oldPassword"
                                               class="form-control">
                                    </div>

                                </div>

                                <div class="clearfix"></div>

                                <span class="help-block small" id="pwdHelp">请输入原始密码</span>
                            </div>

                            <div class="">
                                <label class="control-label" for="password">新密码</label>
                                <div class="clearfix"></div>
                                <div class="">
                                    <div style="width:100%;float: left;">
                                        <input type="password" title="Please enter your new password"
                                               placeholder="************"
                                               required="" value="" name="newPassword" id="newPassword"
                                               class="form-control">
                                    </div>

                                </div>

                                <div class="clearfix"></div>

                                <span class="help-block small" id="pwdHelp">请输入新密码</span>
                            </div>

                            <div class="">
                                <label class="control-label" for="password">重复密码</label>
                                <div class="clearfix"></div>

                                <div class="">
                                    <div style="width:100%;float: left;">
                                        <input type="password" title="Please repeat your password"
                                               placeholder="************"
                                               required="" value="" name="confrimPassword" id="confrimPassword"
                                               class="form-control">
                                    </div>

                                </div>

                                <div class="clearfix"></div>

                                <span class="help-block small" id="pwdHelp">请重复新密码</span>
                            </div>



                            <button type="button" id="updatePasswordBtn"
                                    class="btn btn-success btn-block" >确认修改</button>
                        </form>
                    </div>
                </div></div></div></div></div>
</g:if>
<g:else>

    <g:if test='${flash.message}'>
        <div class='alert alert-dismissable alert-warning psd-msg'
             style="width: 340px; position: absolute; z-index: 9;left: 50%;margin-left:-170px; margin-top: 200px;">
            <h4>Warning!</h4>

            <p>${flash.message}</p>
            <div class="psd-none" style="float: right;position: absolute; right: 10px;top: 5px; cursor: pointer;">X</div>
        </div>
    </g:if>



    <div class="wholeBg">
        <div class="login-container">
        <div class="top-background"></div>

            <div class="col-md-12 smallBg">
                <div class="text-center m-b-md">
                    <h3>请登录</h3>
                    %{--<span>贷款管理系统</span>--}%
                </div>
                <div class="hpanel rightBox">
                    <div class="panel-body">
                        <div class="helpMsg"></div>

                        <form controller="login" action="authenticate" method='POST' id='loginForm'>
                            <div class="form-group">
                                <label class="control-label" for="username">用户名</label>
                                <input type="text" title="Please enter you username" required="" value=""
                                       name="username"
                                       id="username" class="form-control" autofocus="autofocus">
                                <span class="help-block small" id="nameHelp">请输入用户名</span>
                            </div>

                            <div class="form-group">
                                <label class="control-label" for="password">密码</label>
                                <div class="clearfix"></div>

                                <div class="form-group">
                                    <div style="width:100%;float: left;">
                                        <input type="password" title="Please enter your password"
                                               placeholder="************"
                                               required="" value="" name="password" id="password" class="form-control">
                                    </div>
                                </div>

                                <div class="clearfix"></div>

                                <span class="help-block small" id="pwdHelp">请输入密码</span>
                            </div>

                            <div class="form-group" id="code-group">
                                <div id="drag"></div>
                                <span class="help-block small" id="codeHelp">向右滑动解锁</span>
                            </div>

                            <button type="button" id="submitBtn"
                                    class="btn btn-success btn-block">登&nbsp;&nbsp;录</button>
                        </form>
                    </div></div></div></div></div>
</g:else>


<asset:javascript src="homer/vendor/bootstrap/dist/js/bootstrap.min.js"/>
<asset:javascript src="homer/vendor/metisMenu/dist/metisMenu.min.js"/>
<asset:javascript src="homer/vendor/iCheck/icheck.min.js"/>
<asset:javascript src="homer/homer.js"/>
<asset:javascript src="homer/vendor/slideUnlock/drag.js"/>
<asset:javascript src="video/jquery.vidbacking.js"/>
<!-- <asset:javascript src="video/html5media.js"/> -->
<!-- <script src="http://html5media.googlecode.com/svn/trunk/src/html5media.min.js"></script> -->
<script>
    $(function () {
        $('#drag').drag();
        var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
        if (isMobile) {
            $("#code-group").remove();
        }
        $("#submitBtn").click(function () {
            var username = $("#username").val();
            var password = $("#password").val();
            var drag_text = $(".drag_text").text();
            if (!username) {
                $("#nameHelp").addClass("text-danger");
                setTimeout(function () {
                    $("#nameHelp").removeClass("text-danger");
                }, 3000);
                return;
            }
            if (!password) {
                $("#pwdHelp").addClass("text-danger");
                setTimeout(function () {
                    $("#pwdHelp").removeClass("text-danger");
                }, 3000);
                return;
            }
            if (!isMobile) {
                if (drag_text != "验证通过") {
                    $("#codeHelp").addClass("text-danger");
                    setTimeout(function () {
                        $("#codeHelp").removeClass("text-danger");
                    }, 3000);
                    return;
                }
            }


            $("#loginForm").submit();

        });

        var time = 30;
        var interval;
        $('#btnSendVerifiedCode').click(function () {
            $.ajax({
                type: "POST",
                url: "/user/sendVerifiedCode",
                data: {
                    username: $("#username").val(),
                },
                success: function (data) {
                    if (data.status == "success") {
                        helpMessage("验证码发送成功");
                        interval = setInterval(function () {
                            if (time > 0) {
                                $('#btnSendVerifiedCode').attr('disabled', 'disabled').addClass("vCodeActive");
                                $('#btnSendVerifiedCode').val("" + (time--) + '秒后重试');
                            } else {
                                $('#btnSendVerifiedCode').removeAttr('disabled').removeClass("vCodeActive");
                                $('#btnSendVerifiedCode').val("获取验证码");
                                time = 60;
                                clearInterval(interval);
                            }
                        }, 1000);
                    }
                    if (data.status == "error") {
                        helpMessage(data.errorMessage);
                    }
                },
            });
        });
        setTimeout(function () {
            $(".message").fadeOut(200);
        }, 2000);

        function helpMessage(message) {
            $(".helpMsg").text(message).fadeIn(200);
            setTimeout(function () {
                $(".helpMsg").fadeOut(200);
            }, 2000);
        };

        $('#updateForm').submit(function () {
            return false;
        })
        $.checkpsw({'target': $('#oldPassword')});
        $.checkpsw({'target': $('#newPassword')});
        $.checkpsw({'target': $('#confrimPassword')});
        callback = function (oldVal, checkpswFlag) {
            $.ajax({
                url: "/user/updatePassword1",
                type: "post",
                data: $("#updateForm").serialize(),
                success: function (data) {
                    if (data.status == "success") {
                        login();
                    } else {
                        helpMessage(data.errorMessage);
                    }
                },
                error: function (e) {
                    helpMessage('网络异常,请稍后重试!');
                },
            });
        };
        var login = function () {
            $.ajax({
                url: "/login/authenticate",
                type: "post",
                data: "username=" + $("#username1").val() + "&password=" + $("#newPassword").val(),
                success: function (data) {
                    helpMessage('修改密码成功!');
                    location.href = "/opportunity/welcome";
                },
                error: function (e) {
                    helpMessage('网络异常,请稍后重试!');
                },
            });
        }

        // 点击修改按钮验证方法
        $.checkpswSubmit({
            'target': $('#updatePasswordBtn'),
            'oldVal': $('#oldPassword'),
            'newVal': $('#newPassword'),
            'repeatNewVal': $('#confrimPassword')
        }, callback);


        $("#submitBtn").click(function (e) {

            var username = $("#username").val();

            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/login/sendUserName",
                data: {
                    username: username
                },
                success: function (data) {
                    if (data.status == "success") {

                    }
                },
            });

        });
        $(".psd-none").click(function(){
            $(".psd-msg").hide();
        })
    })
</script>
<script>
    $(function(){
        $('body').vidbacking({
            'masked': true
        });
    });
</script>
</body>
</html>
